<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		p {
			margin: 0;
		}

		:root {
			--border-radius: 8px;
		}

		.catroon {
			border-radius: var(--border-radius);
			overflow: hidden;
			/* background-color: skyblue; */
			width: calc(750px / 2);
			height: calc(421px / 2);
			display: grid;
		}

		.catroon img.thumbnail {
			grid-area: 1 / 1 / 1 / 1;
			width: calc(750px / 2);
			height: calc(421px / 2);
			border-radius: var(--border-radius);
		}

		.catroon .tag {
			/* height: 30px; */
			grid-area: 1 / 1 / 1 / 1;
			justify-self: end;
			background-color: rgb(255, 101, 15);
			font-size: 12px;
			color: white;
			padding: 2px 7px;
			height: 20px;
			line-height: 20px;
			border-bottom-left-radius: var(--border-radius);
		}

		.catroon .title-area {
			grid-area: 1 / 1 / 1 / 1;
			align-self: end;
			font-size: 12px;
			color: white;
			background-color: rgba(135, 71, 38, .4);
			padding: 2px 10px;
		}

		.catroon .title-area .title {
			font-size: 16px;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="catroon">
			<img class="thumbnail" src="./assets/jianlai.jpg" alt="">
			<span class="tag">独播</span>
			<div class="title-area">
				<p class="title">剑来</p>
				<p class="desc">我有一剑，摧城开天！ </p>
			</div>
		</div>
	</div>
</body>

</html>